import React, { createContext, useContext, useState } from "react";

// 创建context对象
const MyContext = createContext({})
export const LevelA = () => {

    const [count, setCount] = useState(0)


    return (<div style={{ padding: 30, backgroundColor: 'lightblue', width: '50vw' }}>
        count 值为：{count}
        <button onClick={() => setCount(count + 1)}>+1</button>
        <MyContext.Provider value={{ count, setCount }}>
            <LevelB />
        </MyContext.Provider>

    </div>)
}
const LevelB = () => {


    return (<div style={{ padding: 30, backgroundColor: 'lightgreen' }}>

        <LevelC />
    </div>)
}
const LevelC = () => {

    const ctx = useContext(MyContext)
    console.log(ctx);

    const add = () => {
        ctx.setCount((pre) => pre + 1)
    }
    const reset = () => {
        ctx.setCount(0)
    }
    return (<div style={{ padding: 30, backgroundColor: 'lightyellow' }}>
        Count为{ctx.count}
        <button onClick={add}>+1</button>
        <button onClick={reset}>重置</button>

    </div>)
}